<template>
    <div>
        <h1>人员列表</h1>
        <h3>count组件的求和为: {{ sum }}</h3>
        <h3>列表中第一个人的名字是: {{ firstPersonName }}</h3>
        <input type="text" placeholder="请输入名字" v-model="name">
        <button @click="add">添加</button>
        <button @click="addWang">添加一个姓王的人</button>
        <button @click="addPersonServer">添加一个人,名字随机</button>
        <ul>
            <li v-for="p in personList" :key="p.id">{{ p.name }}</li>
        </ul>
    </div>
</template>

<script>
import {mapState, mapGetters} from 'vuex'
export default {
    name: 'stuPerson',
    data () {
        return {
            name:''
        }
    },
    computed: {
        ...mapState('countAbout', ['sum']),
        ...mapState('personAbout', ['personList']),
        ...mapGetters('personAbout', ['firstPersonName'])
    },
    methods: {
        add () {
            const personObj = {
                id: new Date().valueOf(),
                name: this.name
            }
            this.$store.commit('personAbout/ADD_PERSON', personObj)
            this.name = ''
        },
        addWang () {
            const personObj = {
                id: new Date().valueOf(),
                name: this.name
            }
            this.$store.dispatch('personAbout/addPersonWang', personObj)
            this.name = ''
        },
        addPersonServer () {
            this.$store.dispatch('personAbout/addPersonServer')
        }
    }
}
</script>

<style>

</style>